<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
 
    /* 知识点1：线性渐变（Line Gradients)-
    linear-gradient(blue, red);这种情况是从上到下。
    linear-gradient(0deg, blue 0%, green 40%, red 100%); 这种情况是从下到上  blue 开头 40%是 green 100%是red
    linear-gradient(90deg, blue 0%, green 40%, red 100%);  这种情况是从左到右
    知识点2：盒子边框

    border-width: 0px 0px 1px 0px;
    border-style: solid;

    border-image: linear-gradient(90deg, rgb(0, 137, 255) 0%, rgb(255, 255, 255, 0) 100%) stretch 1; */

    .style1{
        width: 240px;
        height: 80px;
        border-width: 1px 0px 0px 1px;
        border-style: solid;
        border-radius: 45px;
        border-image: linear-gradient(180deg, rgb(12, 133, 240,60%) 0%, rgb(255, 255, 255, 0) 100%) stretch 1;
        opacity:60%;
        text-align: center;
        line-height: 40px;
    }
    .style2{
        /* 带圆角的边框
        一旦通过border-image给border填充颜色了，那border-radius的裁剪效果就失效了
        因此如果 border-image 和 background 这两个颜色属性并存的情况下。我们增加border-radius
        那么background会受到裁剪，而 border-image 不受裁剪，这个时候就出现了两个边框的情况
        可以用clip-path解决:使用裁剪方式创建元素的可显示区域

        inset(0 round 14px)：实现一个父容器大小（完全贴合，垂直水平居中于父容器）且 border-radius: 10px 的容器，将这个元素之外的所有东西裁剪掉
        */
        clip-path: inset(0 round 14px);
        /* circle(30% at 150px 120px); 第一个参数是圆的半径和园的圆心 */
        width: 240px;
        height: 80px;
        border-width: 1px 0px 0px 1px;
        border-style: solid;
        border-radius: 15px;
        border-image: linear-gradient(180deg, rgb(12, 133, 240,60%) 0%, rgb(255, 255, 255, 0) 100%) stretch 1;
        opacity:60%;
        text-align: center;
        line-height: 40px;
        background:linear-gradient(135deg, rgb(3, 21, 37) 0%, rgb(255, 255, 255, 0) 80%) ;
    }
    .style3{
        margin-top: 60px;
        border-width: 0px 0px 1px 0px;
        border-style: solid;
        /* source  slice  repeat */
        border-image: linear-gradient(90deg, rgb(0, 137, 255) 0%, rgb(255, 255, 255, 0) 100%) stretch 1;
    }
    .style0{
        height: 400px;
        background:linear-gradient(135deg, rgb(3, 21, 37) 0%, rgb(255, 255, 255, 0) 80%) ;
    }
</style>
<body>
    <div class="style0">
        style3 里面渐变
    </div>
    <div class="style1">
        style1 有点像按钮的玩意,边框渐变
    </div>
    <div class="style2">
        style2 里面渐变
    </div>
    <div class="style3">
        style3 里面渐变
    </div>
</body>
</html>